/**
 * Created by GYL on 2018/7/27
 */
import React, {Component} from 'react';
import { Accordion, List, Picker, Button, InputItem, TextareaItem, DatePicker  } from 'antd-mobile';
import { createForm } from 'rc-form';
import styles from './myFormList.less';

class MyList extends Component {
  state = {

  };
  componentDidMount(){

  };
  render(){
    let t = this;
    let { items } = t.props;
 
    const { getFieldProps, getFieldError  } = this.props.form;
    return(
      <div>
        <List className={styles.myList}>
        {
        
          items && items.length > 0 &&
          items.map((item, index) => {
            if (item.type === 'select'){
              return(
                <Picker
                  key={index}
                  extra={<span style={{fontSize:14,color:'#616161'}}>{item.extra || '请选择'}</span>}
                  data={item.options}
                  title={item.title}
                  disabled={item.disabled}
                  cols={1}
                  // value={item.values || null}
                  {...getFieldProps(item.paramName, {
                  
                    initialValue:item.initialValue || null,
                    rules: item.rules ? [{required: true,message:item.title+'为必填项！'}] : null,
                  })}
                  onOk={item.onChange || null}
                  onDismiss={e => console.log('dismiss', e)}
                >
                  <List.Item arrow="horizontal">
                    {
                      (item.rules&&item.rules.length > 0)?
                        <span style={{color:'#000000',fontSize:14}}><span style={{color:'#FF0000'}}>*</span>{item.title}</span>:
                        <span style={{color:'#000000',fontSize:14,paddingLeft:6}}>{item.title}</span>
                    }
                  </List.Item>
                </Picker>
              )



             
            }else if(item.type === 'input'){
              return(
                <InputItem
                  className={styles.myInput}
                  key={index}
                  {...getFieldProps(item.paramName, {
                    initialValue: item.initialValue || null,
                    rules: item.rules ? [{required: true,message:item.title+'为必填项！'}] : null,
                  })}
                  extra={item.extra}
                  disabled={item.disabled}
                  clear
                  error={!!getFieldError(item.paramName)}
                  placeholder={item.placeholder || '请输入'}
                  style={{marginTop: 5}}
                >{
                  (item.rules&&item.rules.length > 0)?
                    <span style={{color:'#000000',fontSize:14}}><span style={{color:'#FF0000'}}>*</span>{item.title}<span style={{color:'#9B9B9B'}}>{item.titleE}</span></span>:
                    <span style={{color:'#000000',fontSize:14,paddingLeft:6}}>{item.title}<span style={{color:'#9B9B9B'}}>{item.titleE}</span></span>
                }</InputItem>
              )
            }else if(item.type === 'textAreaInput'){
              return(
                <TextareaItem
                  key={index}
                  {...getFieldProps(item.paramName, {
                    initialValue: item.initialValue || null,
                    rules: item.rules ? [{required: true,message:item.title+'为必填项！'}] : null,
                  })}
                  disabled={item.disabled}
                  clear
                  title={<span style={{color:'#000000',fontSize:14,paddingLeft:6}}>{item.title}</span>}
                  autoHeight
                  placeholder={item.placeholder || '请输入'}
                />
              )
            }else if(item.type === 'datePicker'){
              return(
                <DatePicker
                  key={index}
                  {...getFieldProps(item.paramName, {
                    initialValue: item.initialValue || null,
                    rules: item.rules ? [{required: true,message:item.title+'为必填项！'}] : null,
                  })}
                  disabled={item.disabled}
                  title={<span style={{color:'#000000',fontSize:14,paddingLeft:6}}>{item.title}</span>}
                  extra={<span style={{fontSize:14,color:'#616161'}}>{item.extra || '请选择'}</span>}
                >
                  <List.Item arrow="horizontal">
                    {
                      (item.rules&&item.rules.length > 0)?
                        <span style={{color:'#000000',fontSize:14}}><span style={{color:'#FF0000'}}>*</span>{item.title}</span>:
                        <span style={{color:'#000000',fontSize:14,paddingLeft:6}}>{item.title}</span>
                    }
                  </List.Item>
                </DatePicker>
              )
            }
          })
        }
        </List>
      </div>
    )
  }
}
export default createForm()(MyList);
